﻿<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Status } from '@/utils/http/types.d'
import { RoleSelectorParams } from '@/types/modules/department'
import * as rolesApi from "@/api/modules/role"

const props = defineProps({
  formState: {
    type: Object as PropType<RoleSelectorParams>,
    default: () => ({} as RoleSelectorParams)
  },
  layout: {
    type: String,
    default: 'inline'
  }
})

const {
  value: { labelCol, isHorizontal }
} = computed(() => {
  const isHorizontal = props.layout === 'horizontal'
  let labelCol: any = isHorizontal
    ? { xl: { span: 4 }, md: { span: 6 }, xs: { span: 7 } }
    : { style: { width: '120px', marginBottom: '20px' }, span: 8 }
  return {
    labelCol,
    isHorizontal
  }
})

const { t } = useI18n()
const emit = defineEmits(['search'])

const formRef = ref()
const rules = {}
onMounted(() => {
  rolesSelectOptions()
})

const rolesOptions = ref()

const rolesSelectOptions = async () => {
  const res = await rolesApi.getRoleList()
  if (res.status === Status.SUCCESS) {
    rolesOptions.value = res.data
  }
}

const resetForm = () => {
  formRef.value.resetFields()
  emit('search')
}
</script>
<template>
  <a-form
    ref="formRef"
    name="advanced_search"
    v-bind="{ rules, layout, labelCol }"
    :class="{ isHorizontal }"
    :model="formState"
    labelAlign="right"
    :labelWrap="true"
    @finish="emit('search')"
  >
    <a-form-item name="selectedRoleId" label="角色" :class="{ isInline: !isHorizontal }">
      <a-select
        v-model:value="formState['selectedRoleId']"
        :options="rolesOptions"
        :field-names="{ value: 'id', label: 'name' }"
        :get-popup-container="(node: any) => node.parentNode"
        placeholder="请选择"
        allow-clear
      />
    </a-form-item>
    <a-col :span="23" style="width: 100%; text-align: right">
      <a-form-item class="form-btn">
        <a-button type="primary" html-type="submit">{{
          t('system.search')
        }}</a-button>
        <a-button @click="resetForm">{{ t('system.reset') }}</a-button>
      </a-form-item>
    </a-col>
  </a-form>
</template>
<style lang="less" scoped>
.isHorizontal {
  margin: auto;
  width: 40vw;
}

.ant-form-item {
  margin-right: 0;

  &.isInline {
    width: 430px;
  }

  .ant-picker,
  .ant-input-number {
    width: 100%;
  }
}

.form-btn {
  .ant-btn {
    margin-right: 20px;
  }
}
</style>
